.menu {
  @apply rounded-box flex flex-col flex-wrap gap-0.5 p-2 text-base;
  --menu-active-fg: var(--color-primary);
  --menu-active-bg: color-mix(in oklab, var(--color-primary) 10%, #0000);
  --menu-hover-fg: var(--color-base-content);
  --menu-hover-bg: color-mix(in oklab, var(--color-neutral) 10%, #0000);

  :where(li ul) {
    @apply relative whitespace-nowrap;
  }

  :where(li:not(.dropdown) ul) {
    @apply ms-4 ps-2;
    &:before {
      @apply bg-base-content absolute start-0 top-3 bottom-2.5 opacity-10;
      width: var(--border);
      content: "";
    }
  }

  :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
    @apply hidden;
  }

  :where(.menu li:empty) {
    @apply bg-base-content opacity-10;
    margin: 0.5rem 1rem;
    height: 1px;
  }

  :where(li:not(.menu-title, .tooltip) > *:not(ul, .collapse, .accordion-content, .menu-title, .btn)) {
    @apply rounded-field px-4 py-2.5 text-start transition duration-200 ease-out;
    text-wrap: balance;
  }

  :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title, .btn)) {
    @apply grid grid-flow-col content-start items-center gap-2;
    grid-auto-columns: minmax(auto, max-content) auto max-content;
    user-select: none;
  }

  :where(li.tooltip) > * {
    @apply rounded-field px-4 py-2.5 text-start;
  }

  :where(.menu li:not(.menu-title, .menu-disabled)) {
    @apply text-base-content;
  }

  /* menu focus and hover */
  :where(
    .menu li:not(.menu-title, .menu-disabled) > *:not(ul, .collapse, .accordion-content, .dropdown-active, .menu-title)
  ) {
    &:not(.btn):focus-visible {
      @apply cursor-pointer outline-none;
      color: var(--menu-hover-fg);
      background-color: var(--menu-hover-bg);
    }

    &:hover {
      @apply cursor-pointer outline-none;
      color: var(--menu-hover-fg);
      background-color: var(--menu-hover-bg);
    }
  }

  /* menu active */
  li:not(.menu-title, .menu-disabled) > :not(ul, .menu-title, .collapse, .accordion-content, .btn).menu-active {
    color: var(--menu-active-fg);
    background-color: var(--menu-active-bg);
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);
  }

  /* menu disabled */
  li.menu-disabled {
    @apply pointer-events-none opacity-50 select-none;
  }
}

:where(.menu li) {
  @apply relative flex shrink-0 flex-col flex-wrap items-stretch;
  .badge {
    @apply justify-self-end;
  }
}

.menu-title {
  @apply text-base-content px-4 py-2 text-sm font-medium;
}

/* menu directions */
.menu-horizontal {
  @apply inline-flex flex-row;
  & > li:not(.menu-title) > .collapse > ul {
    @apply absolute ms-0 mt-4 py-2 pe-2;
  }
  & > li > .collapse > ul {
    &:before {
      content: none;
    }
  }
}

:where(.menu-horizontal > li:not(.menu-title) > .collapse > ul) {
  @apply bg-base-100 rounded-box shadow-base-300/20 shadow-sm;
}

.menu-vertical {
  @apply flex flex-col;
  & > li:not(.menu-title) > .collapse > ul {
    @apply relative ms-4 mt-0 py-0 pe-0;
  }
}

/* menu sizes */
.menu-xs {
  :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title)) {
    @apply rounded-field px-2 py-1 text-xs;
  }
  .menu-title {
    @apply px-2 py-1;
  }
}

.menu-sm {
  :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title)) {
    @apply rounded-field px-3 py-2 text-sm;
  }
  .menu-title {
    @apply px-3 py-2;
  }
}

.menu-md {
  :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title)) {
    @apply rounded-field px-4 py-2.5 text-base;
  }
  .menu-title {
    @apply px-4 py-2;
  }
}

.menu-lg {
  :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title)) {
    @apply rounded-field px-5 py-3 text-lg;
  }
  .menu-title {
    @apply px-6 py-3;
  }
}

.menu-xl {
  :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title)) {
    @apply rounded-field px-6 py-3.5 text-xl;
  }
  .menu-title {
    @apply px-6 py-3;
  }
}
